<template>
  <div>
    <!-- 默认选择框,全部展开节点,关闭父子关联 -->
    <el-tree ref="tree" node-key="id" show-checkbox default-expand-all check-strictly :data="list" :props="{label:'name',children:'children'}" />
    <el-row type="flex" justify="end" height="60">
      <el-button type="primary" @click="hSubmit">确定</el-button>
      <el-button type="info" @click="$emit('close')">取消</el-button>
    </el-row>
  </div>
</template>
<script>
import { getPermissionList } from '@/api/permissions'
/* 获取角色权限信息 */
import { getRolesDetail, roleAssignPermission } from '@/api/settings'
import { render } from '@/utils/index'
export default {
  props: {
    prid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: []// 权限数组
    }
  },
  created() {
    this.loadPermissionList()
  },
  methods: {
  // 获取权限列表函数
    async loadPermissionList() {
      try {
        const res = await getPermissionList({ pagesize: 100 })
        console.log('getPermissionList', res)
        this.list = render(res.data)
        const info = await getRolesDetail(this.prid)
        console.log(info, '获取角色的信息')
        /* 选中标签,在setCheckedKeys里传入权限点数组即可 */
        this.$refs.tree.setCheckedKeys(info.data.permIds)
        // 保存数据
      } catch (err) {
        console.log('getPermissionList', err)
      }
    },
    // 点击确定分配权限
    async hSubmit() {
      try {
        /* 获取选中的权限点数组 */
        const permIds = this.$refs.tree.getCheckedKeys()
        /* 分配权限接口调用 */
        const res = await roleAssignPermission({ id: this.prid, permIds: permIds })
        console.log('roleAssignPermission', res)
        /* 关闭弹层 */
        this.$emit('close')
        // 保存数据
      } catch (err) {
        console.log('roleAssignPermission', err)
      }
    }
  }
}
</script>
